<template>
  <div>
    <div class="title">{{ title }}</div>
    <div class="check_list">
      <el-checkbox-group v-model="checkboxGroup">
        <el-row :gutter="22">
          <el-col v-for="(item, index) in list" :key="index" :span="12">
            <el-checkbox class="check_box" :label="item.id" :disabled="item.isEntryRequired" border>
              <span class="check_txt left gl_ellipsis" :title="item.name">{{ item.name }}</span>
              <span class="check_txt official">
                <span v-if="item.isOfficial" class="official_txt">官方</span>
              </span>
              <span class="check_txt right gl_ellipsis">
                <span class="price">￥{{ transferData.isOrganizationRegistered ? formatMoney(item.memberPrice) : formatMoney(item.nonMemberPrice) }}</span> 人/次
              </span>
            </el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default () {
        return [];
      }
    },
    transferData: {
      type: Object,
      default() {
        return {};
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      checkboxGroup: []
    };
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length) {
          for (let i = 0; i < val.length; i++) {
            const item = val[i];
            if (item.isEntryRequired) {
              const findResult = this.checkboxGroup.find(jtem => jtem === item.id);
              if (!findResult) {
                this.checkboxGroup.push(item.id);
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 外部获取组件数据的方法
    getInsideUserData () {
      return new Promise((reslove, reject) => {
        reslove(this.checkboxGroup);
      });
    },
    // 格式化货币格式 （分）
    formatMoney (num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 将元转化为分
    yuanToFen(moneyStr) {
      const _moneyStr = String(moneyStr);
      const yuan = Number(_moneyStr.split('.')[0]) || 0;
      const fen = Number(_moneyStr.split('.')[1]) || 0;
      return yuan * 100 + fen;
    }
  }
};
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #353434;
  }

  .check_box {
    width: 100%;
    height: 52px;
    padding: 15px 20px 15px 20px;
    margin-bottom: 20px;
    border: none;
    background-color: #fff;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
  }
  .check_txt {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #353434;
    vertical-align: top;
  }
  .check_txt.left {
    width: 300px;
  }
  .check_txt.right {
    width: 124px;
    text-align: right;
  }
  .check_txt.official {
    box-sizing: border-box;
    min-width: 38px;
    min-height: 19px;
  }
  .official_txt {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 5px;
    border-radius: 2px;
    background-color: #FFBA00;
    color: #fff;
  }
  .check_txt .price {
    color: #DC1D1D;
  }
</style>
